<template>
  <div class="promotion-list page-container">
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">促销活动管理</h1>
        <p class="page-subtitle">管理商品促销活动，包括满减、折扣、特价等</p>
      </div>
      <el-button type="primary" @click="openAddPromotion" class="add-btn">
        <svg class="btn-icon" viewBox="0 0 24 24" fill="currentColor">
          <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
        </svg>
        新增活动
      </el-button>
    </div>

    <div class="content-card">
      <!-- 搜索区域 -->
      <div class="search-section">
        <el-form :model="searchForm" inline>
          <el-form-item label="活动名称">
            <el-input
              v-model="searchForm.name"
              placeholder="请输入活动名称"
              clearable
              style="width: 180px"
            />
          </el-form-item>
          <el-form-item label="活动类型">
            <el-select
              v-model="searchForm.type"
              placeholder="请选择活动类型"
              clearable
              style="width: 150px"
            >
              <el-option label="满减" value="1" />
              <el-option label="折扣" value="2" />
              <el-option label="特价" value="3" />
            </el-select>
          </el-form-item>
          <el-form-item label="活动状态">
            <el-select
              v-model="searchForm.status"
              placeholder="请选择状态"
              clearable
              style="width: 120px"
            >
              <el-option label="未开始" value="0" />
              <el-option label="进行中" value="1" />
              <el-option label="已结束" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="开始时间">
            <el-date-picker
              v-model="searchForm.startTime"
              type="datetime"
              placeholder="选择开始时间"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker
              v-model="searchForm.endTime"
              type="datetime"
              placeholder="选择结束时间"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 表格 -->
      <el-table
        :data="promotionList"
        style="width: 100%"
        class="promotion-table"
        v-loading="loading"
      >
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column prop="name" label="活动名称" min-width="150" />
        <el-table-column prop="productName" label="商品名称" min-width="150" />
        <el-table-column prop="type" label="活动类型" width="100">
          <template #default="scope">
            <el-tag :type="getTypeTagType(scope.row.type)" size="small">
              {{ getTypeLabel(scope.row.type) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="活动状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusTagType(scope.row.status)" size="small">
              {{ getStatusLabel(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="活动配置" min-width="200">
          <template #default="scope">
            <div class="promotion-config">
              <div
                v-for="(config, index) in scope.row.promotionRuleVOS"
                :key="index"
                class="config-item"
                :class="getConfigItemClass(config.ruleType)"
              >
                <div class="config-icon">
                  <svg
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    width="14"
                    height="14"
                  >
                    <path
                      d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
                    />
                  </svg>
                </div>
                <div class="config-content">
                  <div class="config-detail">
                    {{ getConfigDetail(config) }}
                  </div>
                </div>
              </div>
              <div
                v-if="
                  !scope.row.promotionRuleVOS ||
                  scope.row.promotionRuleVOS.length === 0
                "
                class="no-config"
              >
                <svg
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  width="16"
                  height="16"
                >
                  <path
                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                  />
                </svg>
                <span>暂无配置</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="活动价" width="120">
          <template #default="scope">
            <div class="price-info">
              <div
                v-if="
                  scope.row.promotionProductVO &&
                  scope.row.promotionProductVO.length > 0
                "
              >
                <div
                  v-for="(product, index) in scope.row.promotionProductVO"
                  :key="index"
                  class="product-price"
                >
                  <span class="price"
                    >¥{{ product.promotionPrice.toFixed(2) }}</span
                  >
                  <span class="stock-info"
                    >库存: {{ product.promotionStock }}</span
                  >
                </div>
              </div>
              <div v-else class="no-price">暂无价格</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="限购数量" width="120">
          <template #default="scope">
            <div
              v-if="
                scope.row.promotionProductVO &&
                scope.row.promotionProductVO.length > 0
              "
            >
              <div
                v-for="(product, index) in scope.row.promotionProductVO"
                :key="index"
                class="purchase-limit"
              >
                <span v-if="product.purchaseLimit === -1">无限制</span>
                <span v-else>{{ product.purchaseLimit }}件</span>
              </div>
            </div>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusTagType(scope.row.status)" size="small">
              {{ getStatusLabel(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="活动时间" min-width="200">
          <template #default="scope">
            <div class="time-range">
              <div>{{ formatDateTime(scope.row.startTime) }}</div>
              <div class="separator">↓</div>
              <div>{{ formatDateTime(scope.row.endTime) }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createdByName" label="创建人" width="120" />
        <el-table-column prop="createdTime" label="创建时间" width="180" />
        <el-table-column label="操作" width="250" fixed="right">
          <template #default="scope">
            <div class="action-buttons">
              <!-- 所有状态都可以查看详情 -->
              <el-button
                size="small"
                type="info"
                @click="showDetail(scope.row)"
                class="action-btn"
              >
                详情
              </el-button>

              <!-- 未开始状态：可以开始、编辑 -->
              <template v-if="scope.row.status === 0">
                <el-button
                  size="small"
                  type="success"
                  @click="startPromotion(scope.row)"
                  class="action-btn"
                >
                  开始
                </el-button>
                <el-button
                  size="small"
                  type="primary"
                  @click="editPromotion(scope.row)"
                  class="action-btn"
                >
                  编辑
                </el-button>
              </template>

              <!-- 进行中状态：可以结束、查看销售数据 -->
              <template v-if="scope.row.status === 1">
                <el-button
                  size="small"
                  type="warning"
                  @click="endPromotion(scope.row)"
                  class="action-btn"
                >
                  结束
                </el-button>
                <el-button
                  size="small"
                  type="primary"
                  @click="showSalesData(scope.row)"
                  class="action-btn"
                >
                  销售数据
                </el-button>
              </template>

              <!-- 已结束状态：可以查看销售数据 -->
              <template v-if="scope.row.status === 2">
                <el-button
                  size="small"
                  type="primary"
                  @click="showSalesData(scope.row)"
                  class="action-btn"
                >
                  销售数据
                </el-button>
              </template>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="pagination.pageIndex"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :hide-on-single-page="false"
        />
      </div>
    </div>
  </div>

  <!-- 销售数据弹窗 -->
  <el-dialog
    v-model="salesDialogVisible"
    title="销售数据详情"
    width="90%"
    :close-on-click-modal="false"
    class="sales-dialog"
  >
    <div v-loading="salesLoading" class="sales-content">
      <!-- 活动信息 -->
      <div class="promotion-info" v-if="currentPromotion">
        <h3>{{ currentPromotion.name }}</h3>
        <div class="info-row">
          <span class="label">活动类型：</span>
          <el-tag :type="getTypeTagType(currentPromotion.type)" size="small">
            {{ getTypeLabel(currentPromotion.type) }}
          </el-tag>
        </div>
        <div class="info-row">
          <span class="label">活动状态：</span>
          <el-tag
            :type="getStatusTagType(currentPromotion.status)"
            size="small"
          >
            {{ getStatusLabel(currentPromotion.status) }}
          </el-tag>
        </div>
        <div class="info-row">
          <span class="label">活动时间：</span>
          <span
            >{{ formatDateTime(currentPromotion.startTime) }} -
            {{ formatDateTime(currentPromotion.endTime) }}</span
          >
        </div>
      </div>

      <!-- 销售数据统计 -->
      <div class="sales-summary" v-if="salesData.length > 0">
        <div class="summary-card">
          <div class="summary-item">
            <div class="summary-value">{{ salesData.length }}</div>
            <div class="summary-label">订单总数</div>
          </div>
          <div class="summary-item">
            <div class="summary-value">
              {{
                formatCurrency(
                  salesData.reduce((sum, order) => sum + order.totalAmount, 0)
                )
              }}
            </div>
            <div class="summary-label">订单总金额</div>
          </div>
          <div class="summary-item">
            <div class="summary-value">
              {{
                formatCurrency(
                  salesData.reduce((sum, order) => sum + order.paymentAmount, 0)
                )
              }}
            </div>
            <div class="summary-label">实付总金额</div>
          </div>
          <div class="summary-item">
            <div class="summary-value">
              {{
                formatCurrency(
                  salesData.reduce(
                    (sum, order) => sum + (order.discountAmount || 0),
                    0
                  )
                )
              }}
            </div>
            <div class="summary-label">优惠总金额</div>
          </div>
          <div class="summary-item">
            <div class="summary-value">
              {{
                formatCurrency(
                  salesData.reduce(
                    (sum, order) => sum + (order.pointAmount || 0),
                    0
                  )
                )
              }}
            </div>
            <div class="summary-label">积分抵扣总金额</div>
          </div>
          <div class="summary-item">
            <div class="summary-value">
              {{
                formatCurrency(
                  salesData.reduce(
                    (sum, order) => sum + order.refundedAmount,
                    0
                  )
                )
              }}
            </div>
            <div class="summary-label">退款总金额</div>
          </div>
        </div>
      </div>

      <!-- 订单列表 -->
      <div class="orders-section">
        <h4>订单详情</h4>
        <el-table
          :data="salesData"
          style="width: 100%"
          class="sales-table"
          :expand-row-keys="[]"
          row-key="id"
        >
          <el-table-column type="expand">
            <template #default="{ row }">
              <div class="product-details">
                <h5>商品详情</h5>
                <el-table
                  :data="row.productSales"
                  style="width: 100%"
                  class="product-table"
                >
                  <el-table-column
                    prop="spuName"
                    label="商品名称"
                    width="200"
                  />
                  <el-table-column label="规格" width="200">
                    <template #default="{ row: product }">
                      <div class="specs">
                        {{ formatSpecs(product.skuSpecs) }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="商品图片" width="100" align="center">
                    <template #default="{ row: product }">
                      <el-image
                        v-if="product.skuImage"
                        :src="product.skuImage"
                        :preview-src-list="[product.skuImage]"
                        class="product-image"
                        fit="cover"
                      />
                      <span v-else>-</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="skuNumber"
                    label="数量"
                    width="80"
                    align="center"
                  />
                  <el-table-column label="实际金额" width="120" align="right">
                    <template #default="{ row: product }">
                      <div class="amount-cell">
                        <div class="amount-value">
                          {{ formatCurrency(product.actualPrice) }}
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="退款状态" width="100" align="center">
                    <template #default="{ row: product }">
                      <el-tag
                        :type="getRefundStatusTagType(product.refundStatus)"
                        size="small"
                      >
                        {{ getRefundStatusText(product.refundStatus) }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="退款金额" width="120" align="right">
                    <template #default="{ row: product }">
                      <div class="amount-cell">
                        <div class="amount-value">
                          {{ formatCurrency(product.refundAmount || 0) }}
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="orderNo" label="订单号" width="200" />
          <el-table-column label="订单状态" width="120">
            <template #default="{ row }">
              <el-tag size="small">
                {{ getOrderStatusText(row.orderStatus) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="订单金额" width="120" align="right">
            <template #default="{ row }">
              <div class="amount-cell">
                <div class="amount-value">
                  {{ formatCurrency(row.totalAmount) }}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="实付金额" width="120" align="right">
            <template #default="{ row }">
              <div class="amount-cell">
                <div class="amount-value">
                  {{ formatCurrency(row.paymentAmount) }}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="优惠金额" width="120" align="right">
            <template #default="{ row }">
              <div class="amount-cell">
                <div class="amount-value">
                  {{ formatCurrency(row.discountAmount || 0) }}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="积分抵扣" width="120" align="right">
            <template #default="{ row }">
              <div class="amount-cell">
                <div class="amount-value">
                  {{ formatCurrency(row.pointAmount || 0) }}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="已付金额" width="120" align="right">
            <template #default="{ row }">
              <div class="amount-cell">
                <div class="amount-value">
                  {{ formatCurrency(row.paidAmount) }}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="已退金额" width="120" align="right">
            <template #default="{ row }">
              <div class="amount-cell">
                <div class="amount-value">
                  {{ formatCurrency(row.refundedAmount || 0) }}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="createdTime" label="下单时间" width="180" />
        </el-table>
      </div>

      <!-- 无数据状态 -->
      <div v-if="!salesLoading && salesData.length === 0" class="no-data">
        <el-empty description="暂无销售数据" />
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeSalesDialog">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import dayjs from "dayjs";
import { postWithAuth, getWithAuth } from "@/utils/request";

const router = useRouter();

// 搜索表单
const searchForm = reactive({
  name: "",
  type: "",
  status: "",
  startTime: "",
  endTime: "",
});

// 数据列表
const promotionList = ref<any[]>([]);
const loading = ref(false);

// 销售数据弹窗
const salesDialogVisible = ref(false);
const salesData = ref<any[]>([]);
const currentPromotion = ref<any>(null);
const salesLoading = ref(false);

// 分页
const pagination = reactive({
  pageIndex: 1,
  pageSize: 10,
  total: 0,
});

// 获取活动类型标签
const getTypeTagType = (type: number) => {
  const typeMap: Record<number, string> = {
    1: "info",
    2: "success",
    3: "warning",
    4: "danger",
  };
  return typeMap[type] || "info";
};

// 获取活动类型标签文本
const getTypeLabel = (type: number) => {
  const typeMap: Record<number, string> = {
    1: "满减",
    2: "折扣",
    3: "特价",
  };
  return typeMap[type] || "未知";
};

// 获取状态标签类型
const getStatusTagType = (status: number) => {
  const statusMap: Record<number, string> = {
    0: "info",
    1: "success",
    2: "danger",
  };
  return statusMap[status] || "info";
};

// 获取状态标签文本
const getStatusLabel = (status: number) => {
  const statusMap: Record<number, string> = {
    0: "未开始",
    1: "进行中",
    2: "已结束",
  };
  return statusMap[status] || "未知";
};

// 获取配置详情文本
const getConfigDetail = (config: any) => {
  switch (config.ruleType) {
    case 1: // 满减
      return `满${config.fullAmount.toFixed(2)}减${config.reduceAmount.toFixed(
        2
      )}`;
    case 2: // 折扣
      return `折扣${(config.discount * 10).toFixed(1)}折`;
    case 3: // 特价价
      return `特价价¥${(config.promotionPrice / 100).toFixed(2)}`;
    case 4: // 拼团
      return `${config.groupSize}人团，限时${config.validTime}分钟${
        config.initiatorReduceAmount
          ? `，发起人减${config.initiatorReduceAmount.toFixed(2)}`
          : ""
      }`;
    default:
      return "未知配置";
  }
};

// 获取配置项样式类
const getConfigItemClass = (ruleType: number) => {
  const classMap: Record<number, string> = {
    1: "config-full-reduce",
    2: "config-discount",
    3: "config-seckill",
    4: "config-group",
  };
  return classMap[ruleType] || "config-default";
};

// 格式化日期时间
const formatDateTime = (dateTime: string) => {
  return dayjs(dateTime).format("YYYY-MM-DD HH:mm");
};

// 搜索
const handleSearch = () => {
  pagination.pageIndex = 1;
  fetchPromotionList();
};

// 重置搜索
const resetSearch = () => {
  Object.assign(searchForm, {
    name: "",
    type: "",
    status: "",
    startTime: "",
    endTime: "",
  });
  pagination.pageIndex = 1;
  fetchPromotionList();
};

// 获取促销活动列表
const fetchPromotionList = async () => {
  loading.value = true;
  try {
    const result = await postWithAuth("/internal/promotion/page", {
      ...searchForm,
      pageIndex: pagination.pageIndex,
      pageSize: pagination.pageSize,
    });

    if (result.code === 0) {
      promotionList.value = result.data.list || [];
      pagination.total = parseInt(result.data.total) || 0;
    } else {
      ElMessage.error(result.message || "获取数据失败");
    }
  } catch (error) {
    console.error("获取促销活动列表失败:", error);
    ElMessage.error("获取数据失败");
  } finally {
    loading.value = false;
  }
};

// 分页大小改变
const handleSizeChange = (size: number) => {
  pagination.pageSize = size;
  pagination.pageIndex = 1;
  fetchPromotionList();
};

// 当前页改变
const handleCurrentChange = (page: number) => {
  pagination.pageIndex = page;
  fetchPromotionList();
};

// 新增活动
const openAddPromotion = () => {
  router.push("/promotion-add");
};

// 查看详情
const showDetail = (row: any) => {
  router.push(`/promotion-detail/${row.id}`);
};

// 编辑活动
const editPromotion = (row: any) => {
  if (row.status === 1) {
    ElMessage.warning("活动进行中，无法编辑");
    return;
  }
  router.push(`/promotion-edit/${row.id}`);
};

// 开始促销活动
const startPromotion = async (row: any) => {
  try {
    await ElMessageBox.confirm(`确定要开始活动"${row.name}"吗？`, "确认开始", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    });

    const result = await postWithAuth(
      `/internal/promotion/start/${row.id}`,
      {}
    );

    if (result.code === 0) {
      ElMessage.success("活动开始成功");
      fetchPromotionList();
    } else {
      ElMessage.error(result.message || "活动开始失败");
    }
  } catch (error) {
    if (error !== "cancel") {
      console.error("开始活动失败:", error);
      ElMessage.error("活动开始失败");
    }
  }
};

// 结束促销活动
const endPromotion = async (row: any) => {
  try {
    await ElMessageBox.confirm(`确定要结束活动"${row.name}"吗？`, "确认结束", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    });

    const result = await postWithAuth(`/internal/promotion/end/${row.id}`, {});

    if (result.code === 0) {
      ElMessage.success("活动结束成功");
      fetchPromotionList();
    } else {
      ElMessage.error(result.message || "活动结束失败");
    }
  } catch (error) {
    if (error !== "cancel") {
      console.error("结束活动失败:", error);
      ElMessage.error("活动结束失败");
    }
  }
};

// 查看销售数据
const showSalesData = async (row: any) => {
  salesLoading.value = true;
  try {
    const result = await getWithAuth(`/internal/promotion/sales/${row.id}`);

    if (result.code === 0) {
      salesData.value = result.data || [];
      currentPromotion.value = row;
      salesDialogVisible.value = true;
    } else {
      ElMessage.error(result.message || "获取销售数据失败");
    }
  } catch (error) {
    console.error("获取销售数据失败:", error);
    ElMessage.error("获取销售数据失败");
  } finally {
    salesLoading.value = false;
  }
};

// 关闭销售数据弹窗
const closeSalesDialog = () => {
  salesDialogVisible.value = false;
  salesData.value = [];
  currentPromotion.value = null;
};

// 格式化订单状态
const getOrderStatusText = (status: number) => {
  const statusMap: Record<number, string> = {
    0: "待支付",
    1: "已付款，待发货",
    2: "支付超时",
    3: "已发货",
    4: "已完成",
    5: "已取消",
    6: "申请退款",
    7: "部分退款",
    8: "全部退款",
    9: "已评价",
    10: "已出库",
  };
  return statusMap[status] || "未知状态";
};

// 格式化退款状态
const getRefundStatusText = (status: number) => {
  const statusMap: Record<number, string> = {
    0: "无退款",
    1: "退款中",
    2: "已退款",
  };
  return statusMap[status] || "未知状态";
};

// 格式化退款状态标签类型
const getRefundStatusTagType = (status: number) => {
  const typeMap: Record<number, string> = {
    0: "info",
    1: "warning",
    2: "success",
  };
  return typeMap[status] || "info";
};

// 格式化规格信息
const formatSpecs = (skuSpecs: string) => {
  try {
    const specs = JSON.parse(skuSpecs);
    return Object.entries(specs)
      .map(([key, value]) => `${key}: ${value}`)
      .join("; ");
  } catch (e) {
    return skuSpecs;
  }
};

// 格式化金额
const formatCurrency = (amount: number) => {
  return `¥${amount.toFixed(2)}`;
};

// 页面加载时获取数据
onMounted(() => {
  fetchPromotionList();
});
</script>

<style scoped>
.promotion-list {
  padding: 24px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.header-content {
  flex: 1;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 8px 0;
}

.page-subtitle {
  font-size: 14px;
  color: #64748b;
  margin: 0;
}

.add-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-weight: 500;
}

.btn-icon {
  width: 16px;
  height: 16px;
}

.content-card {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.search-section {
  padding: 24px;
  border-bottom: 1px solid #f1f5f9;
  background: #fafafa;
}

.promotion-table {
  margin: 0;
}

.price-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.price {
  color: #ef4444;
  font-weight: 600;
  font-size: 14px;
}

.stock-info {
  color: #64748b;
  font-size: 12px;
}

.no-price {
  color: #999;
  font-size: 12px;
  font-style: italic;
}

.purchase-limit {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 2px;
}

.time-range {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #64748b;
}

.separator {
  color: #94a3b8;
  text-align: center;
  margin-right: 80px;
}

.promotion-config {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.config-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.config-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
}

.config-full-reduce {
  background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
  border-color: #2196f3;
}

.config-full-reduce::before {
  background: #2196f3;
}

.config-discount {
  background: linear-gradient(135deg, #e8f5e8 0%, #f1f8e9 100%);
  border-color: #4caf50;
}

.config-discount::before {
  background: #4caf50;
}

.config-seckill {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  border-color: #ff9800;
}

.config-seckill::before {
  background: #ff9800;
}

.config-group {
  background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%);
  border-color: #e91e63;
}

.config-group::before {
  background: #e91e63;
}

.config-default {
  background: linear-gradient(135deg, #f5f5f5 0%, #eeeeee 100%);
  border-color: #9e9e9e;
}

.config-default::before {
  background: #9e9e9e;
}

.config-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  flex-shrink: 0;
}

.config-content {
  flex: 1;
  min-width: 0;
}

.config-detail {
  font-size: 12px;
  color: #333;
  font-weight: 500;
  line-height: 1.3;
}

.no-config {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #999;
  font-size: 12px;
  font-style: italic;
  padding: 8px 12px;
  background: #f9f9f9;
  border-radius: 6px;
  border: 1px dashed #ddd;
}

.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
}

.action-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.pagination-wrapper {
  padding: 20px 24px;
  display: flex;
  justify-content: center;
  border-top: 1px solid #f1f5f9;
  background: white;
  margin-top: 16px;
}

/* 确保分页插件可见 */
.pagination-wrapper .el-pagination {
  display: flex !important;
  align-items: center;
  gap: 8px;
}

/* 销售数据弹窗样式 */
.sales-dialog {
  .el-dialog__body {
    padding: 20px;
  }
}

.sales-content {
  min-height: 400px;
}

.promotion-info {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border-left: 4px solid #409eff;

  h3 {
    margin: 0 0 15px 0;
    color: #1e293b;
    font-size: 18px;
    font-weight: 600;
  }

  .info-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;

    .label {
      font-weight: 500;
      color: #64748b;
      min-width: 80px;
    }
  }
}

.sales-summary {
  margin-bottom: 20px;

  .summary-card {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    color: white;

    .summary-item {
      text-align: center;
      padding: 12px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);

      .summary-value {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 4px;
        color: #fff;
      }

      .summary-label {
        font-size: 12px;
        opacity: 0.9;
        line-height: 1.3;
      }
    }
  }
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .sales-summary .summary-card {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .sales-dialog {
    .el-dialog {
      width: 95% !important;
      margin: 0 auto;
    }
  }

  .sales-summary .summary-card {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;

    .summary-item {
      padding: 10px;

      .summary-value {
        font-size: 18px;
      }

      .summary-label {
        font-size: 11px;
      }
    }
  }

  .promotion-info {
    padding: 16px;

    .info-row {
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;

      .label {
        min-width: auto;
      }
    }
  }
}

.orders-section {
  h4 {
    margin: 0 0 16px 0;
    color: #1e293b;
    font-size: 16px;
    font-weight: 600;
  }
}

.sales-table {
  .el-table__expand-icon {
    color: #409eff;
  }
}

.product-details {
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  margin: 8px 0;

  h5 {
    margin: 0 0 12px 0;
    color: #1e293b;
    font-size: 14px;
    font-weight: 600;
  }
}

.product-table {
  .product-image {
    width: 50px;
    height: 50px;
    border-radius: 4px;
  }

  .specs {
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
  }
}

.amount-cell {
  .amount-value {
    font-weight: 600;
    color: #1e293b;
  }
}

.no-data {
  text-align: center;
  padding: 40px 0;
}

.dialog-footer {
  text-align: right;
}
</style>
